<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>One Page Version</title>
		<meta name="description" content="iDea a Bootstrap-based, Responsive HTML5 Template">
		<meta name="author" content="htmlcoder.me">

		<!-- Mobile Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Favicon -->
		<link rel="shortcut icon" href="images/favicon.ico">

		<!-- Web Fonts -->
		 
		 

		<!-- Bootstrap core CSS -->
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

		<!-- Font Awesome CSS -->
		<link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">

		<!-- Fontello CSS -->
		<link href="fonts/fontello/css/fontello.css" rel="stylesheet">

		<!-- Plugins -->
		<link href="plugins/rs-plugin/css/settings.css" media="screen" rel="stylesheet">
		<link href="plugins/rs-plugin/css/extralayers.css" media="screen" rel="stylesheet">
		<link href="plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
		<link href="css/animations.css" rel="stylesheet">
		<link href="plugins/owl-carousel/owl.carousel.css" rel="stylesheet">

		<!-- iDea core CSS file -->
		<link href="css/style.css" rel="stylesheet">

		<!-- Color Scheme (In order to change the color scheme, replace the red.css with the color scheme that you prefer)-->
		<link href="css/skins/red.css" rel="stylesheet">

		<!-- Custom css --> 
		<link href="css/custom.css" rel="stylesheet">
	</head>

	<!-- body classes: 
			"boxed": boxed layout mode e.g. <body class="boxed">
			"pattern-1 ... pattern-9": background patterns for boxed layout mode e.g. <body class="boxed pattern-1"> 
	-->
	<body class="front">
		<!-- scrollToTop -->
		<!-- ================ -->
		<div class="scrollToTop"><i class="icon-up-open-big"></i></div>

		<!-- page wrapper start -->
		<!-- ================ -->
		<div class="page-wrapper">

			<!-- header-top start -->
			<!-- ================ -->
			<div id="header-top" class="header-top banner">

				<!-- slideshow start -->
				<!-- ================ -->
				<div class="slideshow">
					
					<!-- slider revolution start -->
					<!-- ================ -->
					<div class="slider-banner-container">
						<div class="slider-banner-fullscreen">
							<ul>
								<!-- slide 1 start -->
								<li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Slide 1">
								
								<!-- main image -->
								<img src="images/onepage-slider-slide-1.jpg"  alt="slidebg1" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">

								<!-- LAYER NR. 1 -->
								<div class="tp-caption very_large_text sfr tp-resizeme"
									data-x="center"
									data-y="70" 
									data-speed="600"
									data-start="1200"
									data-end="10000"
									data-endspeed="600">iDea - Premium HTML5 template
								</div>

								<!-- LAYER NR. 2 -->
								<div class="tp-caption light_medium_20 sfb tp-resizeme"
									data-x="center"
									data-y="170" 
									data-speed="600"
									data-start="1600"
									data-end="10000"
									data-endspeed="600">100% Responsive
								</div>

								<!-- LAYER NR. 3 -->
								<div class="tp-caption light_medium_20 sfb tp-resizeme"
									data-x="center"
									data-y="220" 
									data-speed="600"
									data-start="1800"
									data-end="10000"
									data-endspeed="600">Bootstrap Based
								</div>

								<!-- LAYER NR. 4 -->
								<div class="tp-caption light_medium_20 sfb tp-resizeme"
									data-x="center"
									data-y="270" 
									data-speed="600"
									data-start="2000"
									data-end="10000"
									data-endspeed="600">Packed Full of Features
								</div>

								<!-- LAYER NR. 5 -->
								<div class="tp-caption light_medium_20 sfb tp-resizeme"
									data-x="center"
									data-y="320" 
									data-speed="600"
									data-start="2200"
									data-end="10000"
									data-endspeed="600">Very Easy to Customize
								</div>

								<!-- LAYER NR. 6 -->
								<div class="tp-caption light_medium_20 sfb tp-resizeme"
									data-x="center"
									data-y="370" 
									data-speed="600"
									data-start="2400"
									data-end="10000"
									data-endspeed="600">And Much More...
								</div>

								<!-- LAYER NR. 7 -->
								<div class="tp-caption light_medium_20 sfb"
									data-x="center"
									data-y="500" 
									data-speed="600"
									data-start="0"
									data-end="10000"
									data-endspeed="600">
									<a href="#about" class="btn btn-lg moving smooth-scroll"><i class="fa fa-angle-double-down fa-2x"></i></a>
								</div>

								</li>
								<!-- slide 1 end -->

								<!-- slide 2 start -->
								<li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Slide 2">
								
								<!-- main image -->
								<img src="images/onepage-slider-slide-2.jpg"  alt="slidebg1" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">

								<!-- LAYER NR. 1 -->
								<div class="tp-caption very_large_text sfr tp-resizeme"
									data-x="center"
									data-y="70" 
									data-speed="600"
									data-start="1200"
									data-end="10000"
									data-endspeed="600">iDea - Powerful Bootstrap Theme
								</div>

								<!-- LAYER NR. 2 -->
								<div class="tp-caption light_medium_20 sfb tp-resizeme"
									data-x="center"
									data-y="170" 
									data-speed="600"
									data-start="1600"
									data-end="10000"
									data-endspeed="600">W3C Validated
								</div>

								<!-- LAYER NR. 3 -->
								<div class="tp-caption light_medium_20 sfb tp-resizeme"
									data-x="center"
									data-y="220" 
									data-speed="600"
									data-start="1800"
									data-end="10000"
									data-endspeed="600">Unlimited layout variations
								</div>

								<!-- LAYER NR. 4 -->
								<div class="tp-caption light_medium_20 sfb tp-resizeme"
									data-x="center"
									data-y="270" 
									data-speed="600"
									data-start="2000"
									data-end="10000"
									data-endspeed="600">Google Maps
								</div>

								<!-- LAYER NR. 5 -->
								<div class="tp-caption light_medium_20 sfb tp-resizeme"
									data-x="center"
									data-y="320" 
									data-speed="600"
									data-start="2200"
									data-end="10000"
									data-endspeed="600">Very Flexible
								</div>

								<!-- LAYER NR. 6 -->
								<div class="tp-caption light_medium_20 sfb tp-resizeme"
									data-x="center"
									data-y="370" 
									data-speed="600"
									data-start="2400"
									data-end="10000"
									data-endspeed="600">And Much More...
								</div>

								<!-- LAYER NR. 7 -->
								<div class="tp-caption light_medium_20 sfb"
									data-x="center"
									data-y="500" 
									data-speed="600"
									data-start="0"
									data-end="10000"
									data-endspeed="600">
									<a href="#about" class="btn btn-lg moving smooth-scroll"><i class="fa fa-angle-double-down fa-2x"></i></a>
								</div>

								</li>
								<!-- slide 2 end -->

							</ul>
							<div class="tp-bannertimer tp-bottom"></div>
						</div>
					</div>
					<!-- slider revolution end -->

				</div>
				<!-- slideshow end -->

			</div>
			<!-- header-top end -->

			<!-- header start (remove fixed class from header in order to disable fixed navigation mode) -->
			<!-- ================ --> 
			<header class="header header-small fixed clearfix">
				<div class="container">
					<div class="row">
						<div class="col-md-3">

							<!-- header-left start -->
							<!-- ================ -->
							<div class="header-left clearfix">

								<!-- logo -->
								<div class="logo smooth-scroll">
									<a href="#header-top"><img id="logo" src="images/logo_red.png" alt="iDea"></a>
								</div>

								<!-- name-and-slogan -->
								<div class="site-slogan">
									Clean &amp; Powerful Bootstrap Theme
								</div>

							</div>
							<!-- header-left end -->

						</div>
						<div class="col-md-9">

							<!-- header-right start -->
							<!-- ================ -->
							<div class="header-right clearfix">

								<!-- main-navigation start -->
								<!-- ================ -->
								<div class="main-navigation animated">

									<!-- navbar start -->
									<!-- ================ -->
									<nav class="navbar navbar-default" role="navigation">
										<div class="container-fluid">

											<!-- Toggle get grouped for better mobile display -->
											<div class="navbar-header">
												<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
													<span class="sr-only">Toggle navigation</span>
													<span class="icon-bar"></span>
													<span class="icon-bar"></span>
													<span class="icon-bar"></span>
												</button>
											</div>

											<!-- Collect the nav links, forms, and other content for toggling -->
											<div class="collapse navbar-collapse scrollspy smooth-scroll" id="navbar-collapse-1">
												<ul class="nav navbar-nav navbar-right">
													<li class="dropdown active">
														<a href="#header-top" class="dropdown-toggle" data-toggle="dropdown">Home</a>
														<ul class="dropdown-menu">
															<li><a href="index.html">Home - Default</a></li>
														</ul>
													</li>
													<li><a href="#about" class="dropdown-toggle" data-toggle="dropdown">About</a></li>
													<li><a href="#services">Services</a></li>
													<li><a href="#portfolio">Portfolio</a></li>
													<li><a href="#footer">Contact</a></li>
												</ul>
											</div>

										</div>
									</nav>
									<!-- navbar end -->

								</div>
								<!-- main-navigation end -->

							</div>
							<!-- header-right end -->

						</div>
					</div>
				</div>
			</header>
			<!-- header end -->

			<!-- main-container start -->
			<!-- ================ -->
			<section class="main-container object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="300">

				<!-- section start -->
				<!-- ================ -->
				<div class="clearfix">
					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<br>
								<h1 class="text-center space-top" id="about">About Us</h1>
								<div class="separator"></div>
								<p class="lead text-center">Lorem ipsum dolor sit amet laudantium molestias similique.<br> Quisquam incidunt ut laboriosam.</p>
								<br>
								<div class="row">
									<div class="col-md-6">
										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Suspendisse aliquet imperdiet commodo. Aenean vel lacinia elit. Class aptent taciti sociosqu ad litora torquent per.</p>
										<p>Sed eget pulvinar quam, vel feugiat enim. Aliquam erat volutpat. Phasellus eu porta ipsum. Suspendisse aliquet imperdiet commodo. Aenean vel lacinia elit. Class aptent taciti sociosqu ad litora torquent per. Vestibulum velmo.</p>
										<ul class="list-icons">
											<li class="object-non-visible" data-animation-effect="fadeInUpSmall"><i class="icon-check"></i> Etiam sed dolor ac diam volutpat</li>
											<li class="object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100"><i class="icon-check"></i> Sed eget pulvinar quam, vel feugiat enim aliquam </li>
											<li class="object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="300"><i class="icon-check"></i> Erat volutpat. Phasellus eu porta ipsum suspendisse aliquet imperdiet</li>
											<li class="object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="500"><i class="icon-check"></i> Phasellus eu porta ipsum. Suspendisse aliquet imperdiet commodo</li>
										</ul>
									</div>

									<!-- sidebar start -->
									<aside class="sidebar col-md-6">
										<div class="side vertical-divider-left">
											<div class="block clearfix">
												<h3 class="title margin-top-clear">Intro Video</h3>
												<div class="embed-responsive embed-responsive-16by9">
													<iframe class="embed-responsive-item" src="//player.vimeo.com/video/29198414?byline=0&amp;portrait=0"></iframe>
													<p><a href="http://vimeo.com/29198414">Introducing Vimeo Music Store</a> from <a href="http://vimeo.com/staff">Vimeo Staff</a> on <a href="https://vimeo.com">Vimeo</a>.</p>  
												</div>
											</div>
										</div>
									</aside>
									<!-- sidebar end -->
								</div>
								<br>
							</div>
						</div>
					</div>
				</div>
				<!-- section end -->

			</section>
			<!-- main-container end -->

			<!-- section start -->
			<!-- ================ -->
			<div class="section gray-bg clearfix object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="300">
				<div class="container">
					<h2 class="title">Our Team</h2>
					<div class="separator-2"></div>
					<p class="lead">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus.</p>
					<div class="row grid-space-20">
						<div class="col-md-3 col-sm-6">
							<div class="box-style-1 white-bg team-member">
								<div class="overlay-container">
									<img src="images/team-member-1.jpg" alt="">
									<div class="overlay">
										<ul class="social-links clearfix">
											<li class="twitter"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-twitter"></i></a></li>
											<li class="skype"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-skype"></i></a></li>
											<li class="facebook"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-facebook"></i></a></li>
										</ul>
									</div>
								</div>
								<h3>John Doe</h3>
								CEO
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="box-style-1 white-bg team-member">
								<div class="overlay-container">
									<img src="images/team-member-2.jpg" alt="">
									<div class="overlay">
										<ul class="social-links clearfix">
											<li class="twitter"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-twitter"></i></a></li>
											<li class="skype"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-skype"></i></a></li>
											<li class="facebook"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-facebook"></i></a></li>
										</ul>
									</div>
								</div>
								<h3>Jane Doe</h3>
								CTO
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="box-style-1 white-bg team-member">
								<div class="overlay-container">
									<img src="images/team-member-3.jpg" alt="">
									<div class="overlay">
										<ul class="social-links clearfix">
											<li class="twitter"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-twitter"></i></a></li>
											<li class="skype"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-skype"></i></a></li>
											<li class="facebook"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-facebook"></i></a></li>
										</ul>
									</div>
								</div>
								<h3>Smith Doel</h3>
								Project Manager
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="box-style-1 white-bg team-member">
								<div class="overlay-container">
									<img src="images/team-member-4.jpg" alt="">
									<div class="overlay">
										<ul class="social-links clearfix">
											<li class="twitter"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-twitter"></i></a></li>
											<li class="skype"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-skype"></i></a></li>
											<li class="facebook"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-facebook"></i></a></li>
										</ul>
									</div>
								</div>
								<h3>Margaret Doe</h3>
								Developer
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<div class="section clearfix">
				<div class="container">
					<br>
					<h1 class="text-center space-top" id="services">Services</h1>
					<div class="separator"></div>
					<p class="lead text-center">Lorem ipsum dolor sit amet laudantium molestias similique.<br> Quisquam incidunt ut laboriosam.</p>
					<br>					
					<div class="row">
						<div class="col-md-6 object-non-visible" data-animation-effect="fadeInLeftSmall" data-effect-delay="300">
							<div class="box-style-3 right">
								<div class="icon-container default-bg">
									<i class="fa fa-bold"></i>
								</div>
								<div class="body">
									<h2>Bootstrap Based</h2>
									<p>Voluptatem ad provident non veritatis beatae cupiditate amet reiciendis.</p>
									<a href="page-services.html" class="link"><span>Read More</span></a>
								</div>
							</div>
							<div class="box-style-3 right">
								<div class="icon-container default-bg">
									<i class="fa fa-check"></i>
								</div>
								<div class="body">
									<h2>Unlimited Options</h2>
									<p>Iure sequi unde hic. Sapiente quaerat labore inventore veritatis cumque.</p>
									<a href="page-services.html" class="link"><span>Read More</span></a>
								</div>
							</div>
							<div class="box-style-3 right">
								<div class="icon-container default-bg">
									<i class="fa fa-bicycle"></i>
								</div>
								<div class="body">
									<h2>Easy to Use</h2>
									<p>Inventore dolores aut laboriosam cum consequuntur delectus sequi! Eum est.</p>
									<a href="page-services.html" class="link"><span>Read More</span></a>
								</div>
							</div>
						</div>
						<div class="col-md-6 object-non-visible" data-animation-effect="fadeInRightSmall" data-effect-delay="300">
							<div class="space hidden-lg hidden-md"></div>
							<img src="images/services-1.png" alt="iDea">
						</div>
					</div>
					<div class="space"></div>
				</div>
			</div>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<div class="section parallax light-translucent-bg parallax-bg-3 object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="300">
				<div class="container">
					<div class="call-to-action">
						<div class="row">
							<div class="col-md-8">
								<h1 class="title text-center">Clean &amp; Powerful Bootstrap Theme</h1>
								<p class="text-center">Sed ut Perspiciatis Unde Omnis Iste Sed ut sit  voluptatem accusan tium </p>
							</div>
							<div class="col-md-4">
								<div class="text-center">
									<a href="#" class="btn btn-default btn-lg">Purchase</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<div class="section clearfix object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="300">
				<div class="container">
					<div class="row">
						<div class="col-md-12">

							<h1 class="text-center">Why Choose iDea</h1>
							<div class="separator"></div>
							<p class="lead text-center">Lorem ipsum dolor sit amet. Maiores, odio ut deleniti doloremque ad at praesentium<br> laudantium molestias similique. Quisquam incidunt ut laboriosam.</p>
							
							<!-- Tabs start -->
							<!-- ================ -->
							<div class="vertical hc-tabs">

								<!-- Tabs Top -->
								<div class="hc-tabs-top">
									<img data-tab="#tab1" src="images/section-image-1.png" alt="iDea" data-tab-animation-effect="fadeInRightSmall">
									<img data-tab="#tab2" src="images/section-image-2.png" alt="iDea" data-tab-animation-effect="fadeInRightSmall">
									<img data-tab="#tab3" src="images/section-image-3.png" alt="iDea" data-tab-animation-effect="fadeInRightSmall">
									<img data-tab="#tab4" src="images/section-image-4.png" alt="iDea" data-tab-animation-effect="fadeInRightSmall">
									<div class="space"></div>
								</div>
								
								<!-- Tabs Arrow -->
								<div class="arrow hidden-sm hidden-xs"><i class="fa fa-caret-up"></i></div>
								
								<!-- Nav tabs -->
								<ul class="nav nav-tabs" role="tablist">
									<li class="active"><a href="#tab1" role="tab" data-toggle="tab"><i class="fa fa-magic pr-10"></i> Very Flexible</a></li>
									<li><a href="#tab2" role="tab" data-toggle="tab"><i class="fa fa-life-saver pr-10"></i> Top Notch 24/7 Support</a></li>
									<li><a href="#tab3" role="tab" data-toggle="tab"><i class="fa fa-expand pr-10"></i> 100% Responsive</a></li>
									<li><a href="#tab4" role="tab" data-toggle="tab"><i class="fa fa-file-o pr-10"></i> Well Documented</a></li>
								</ul>

								<!-- Tab panes -->
								<div class="tab-content">
									<div class="tab-pane fade in active" id="tab1">
										<h1 class="text-center title">Very Flexible</h1>
										<div class="space"></div>
										<div class="row">
											<div class="col-md-6">
												<ul class="list-icons">
													<li><i class="icon-check pr-10"></i> Lorem ipsum dolor sit amet maiores</li>
													<li><i class="icon-check pr-10"></i> Consectetur adipisicing elit</li>
													<li><i class="icon-check pr-10"></i> Aut earum numquam hic placeat</li>
													<li><i class="icon-check pr-10"></i> Fugiat rem consequatur neque</li>
													<li><i class="icon-check pr-10"></i> Vitae magnam commodi repellendus</li>
													<li><i class="icon-check pr-10"></i> Expedita placeat omnis pariatur</li>
													<li><i class="icon-check pr-10"></i> Fugiat rem consequatur neque</li>
												</ul>
											</div>
											<div class="col-md-6">
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere hic qui non placeat ad explicabo dignissimos amet iusto veniam!</p>
												<p>Quo expedita tempore modi minima at adipisci saepe excepturi alias consequuntur sunt asperiores enim ut assumenda hic vitae, odio deleniti illo, veniam quas!</p>
												<p>Dignissimos quaerat. Iusto consequuntur natus quisquam vitae omnis ipsam dolorum praesentium.</p>
											</div>
										</div>
									</div>
									<div class="tab-pane fade" id="tab2">
										<h1 class="text-center title">Top Notch 24/7 Support</h1>
										<div class="space"></div>
										<div class="row">
											<div class="col-md-6">
												<ul class="list-icons">
													<li><i class="icon-check pr-10"></i> Consectetur adipisicing elit</li>
													<li><i class="icon-check pr-10"></i> Aut earum numquam hic placeat</li>
													<li><i class="icon-check pr-10"></i> Fugiat rem consequatur neque</li>
													<li><i class="icon-check pr-10"></i> Vitae magnam commodi repellendus</li>
													<li><i class="icon-check pr-10"></i> Expedita placeat omnis pariatur</li>
													<li><i class="icon-check pr-10"></i> Fugiat rem consequatur neque</li>
													<li><i class="icon-check pr-10"></i> Lorem ipsum dolor sit amet maiores</li>
												</ul>
											</div>
											<div class="col-md-6">
												<p>Dolor sit amet, consectetur adipisicing elit. Facere hic qui non placeat ad explicabo dignissimos amet iusto veniam!</p>
												<p>Expedita tempore modi minima at adipisci saepe excepturi alias consequuntur sunt asperiores enim ut assumenda hic vitae, odio deleniti illo, veniam quas!</p>
												<p>Dignissimos quaerat. Iusto consequuntur natus quisquam vitae omnis ipsam dolorum praesentium.</p>
											</div>
										</div>
									</div>
									<div class="tab-pane fade" id="tab3">
										<h1 class="text-center title">100% Responsive</h1>
										<div class="space"></div>
										<div class="row">
											<div class="col-md-6">
												<ul class="list-icons">
													<li><i class="icon-check pr-10"></i> Aut earum numquam hic placeat</li>
													<li><i class="icon-check pr-10"></i> Fugiat rem consequatur neque</li>
													<li><i class="icon-check pr-10"></i> Vitae magnam commodi repellendus</li>
													<li><i class="icon-check pr-10"></i> Expedita placeat omnis pariatur</li>
													<li><i class="icon-check pr-10"></i> Fugiat rem consequatur neque</li>
													<li><i class="icon-check pr-10"></i> Lorem ipsum dolor sit amet maiores</li>
													<li><i class="icon-check pr-10"></i> Consectetur adipisicing elit</li>
												</ul>
											</div>
											<div class="col-md-6">
												<p>Ipsum dolor sit amet, consectetur adipisicing elit. Facere hic qui non placeat ad explicabo dignissimos amet iusto veniam!</p>
												<p>Tempore modi minima at adipisci saepe excepturi alias consequuntur sunt asperiores enim ut assumenda hic vitae, odio deleniti illo, veniam quas!</p>
												<p>Dignissimos quaerat. Iusto consequuntur natus quisquam vitae omnis ipsam dolorum praesentium.</p>
											</div>
										</div>
									</div>
									<div class="tab-pane fade" id="tab4">
										<h1 class="text-center title">Well Documented</h1>
										<div class="space"></div>
										<div class="row">
											<div class="col-md-6">
												<ul class="list-icons">
													<li><i class="icon-check pr-10"></i> Fugiat rem consequatur neque</li>
													<li><i class="icon-check pr-10"></i> Vitae magnam commodi repellendus</li>
													<li><i class="icon-check pr-10"></i> Expedita placeat omnis pariatur</li>
													<li><i class="icon-check pr-10"></i> Fugiat rem consequatur neque</li>
													<li><i class="icon-check pr-10"></i> Lorem ipsum dolor sit amet maiores</li>
													<li><i class="icon-check pr-10"></i> Consectetur adipisicing elit</li>
													<li><i class="icon-check pr-10"></i> Aut earum numquam hic placeat</li>
												</ul>
											</div>
											<div class="col-md-6">
												<p>Sit amet, consectetur adipisicing elit. Facere hic qui non placeat ad explicabo dignissimos amet iusto veniam!</p>
												<p>Modi minima at adipisci saepe excepturi alias consequuntur sunt asperiores enim ut assumenda hic vitae, odio deleniti illo, veniam quas!</p>
												<p>Dignissimos quaerat. Iusto consequuntur natus quisquam vitae omnis ipsam dolorum praesentium.</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- tabs end -->
				
						</div>
					</div>
				</div>
			</div>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<div class="section object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="300">
				<div class="container">
					<br>
					<h1 class="text-center space-top" id="portfolio">Portfolio</h1>
					<div class="separator"></div>
					<p class="lead text-center">Lorem ipsum dolor sit amet laudantium molestias similique.<br> Quisquam incidunt ut laboriosam.</p>
					<br>			
					<div class="row">
						<div class="col-md-12">

							<!-- isotope filters start -->
							<div class="filters text-center">
								<ul class="nav nav-pills">
									<li class="active"><a href="#" data-filter="*">All</a></li>
									<li><a href="#" data-filter=".web-design">Web design</a></li>
									<li><a href="#" data-filter=".app-development">App development</a></li>
									<li><a href="#" data-filter=".site-building">Site building</a></li>
								</ul>
							</div>
							<!-- isotope filters end -->

							<!-- portfolio items start -->
							<div class="isotope-container row grid-space-20">
								<div class="col-sm-6 col-md-3 isotope-item web-design">
									<div class="image-box">
										<div class="overlay-container">
											<img src="images/portfolio-1.jpg" alt="">
											<a class="overlay small" data-toggle="modal" data-target="#project-1">
												<i class="fa fa-link"></i>
												<span>Web Design</span>
											</a>
										</div>
										<a class="btn btn-light-gray btn-block" data-toggle="modal" data-target="#project-1">Project Title</a>
									</div>
									<!-- Modal -->
									<div class="modal fade" id="project-1" tabindex="-1" role="dialog" aria-labelledby="project-1-label" aria-hidden="true">
										<div class="modal-dialog modal-lg">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
													<h4 class="modal-title" id="project-1-label">Project Title</h4>
												</div>
												<div class="modal-body">
													<div class="row">
														<div class="col-md-6">
															<h3>Project Description</h3>
															<div class="separator-2"></div>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
															<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
														</div>
														<div class="col-md-6">
															<div class="owl-carousel content-slider-with-controls">
																<div class="overlay-container">
																	<img src="images/portfolio-item-1.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-2.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-3.jpg" alt="">
																</div>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-md-6 col-xs-6">
															<h3>Project Info</h3>
															<ul class="list">
																<li><strong class="vertical-divider">Client </strong> John Doe</li>
																<li><strong class="vertical-divider">Date </strong> OCT 2014</li>
																<li><strong class="vertical-divider">In </strong> Web Design</li>
																<li><strong class="vertical-divider">Place </strong> Europe</li>
																<li><strong class="vertical-divider">URL </strong> <a href="http://www.htmlcoder.me/preview/idea/v.1.0/">www.idea.com</a></li>
															</ul>
														</div>
														<div class="col-md-6 col-xs-12">
															<h3>More info</h3>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
															<form role="form">
																<div class="form-group has-feedback">
																	<input type="email" class="form-control" id="project-1-email" placeholder="Email">
																	<i class="fa fa-envelope-o form-control-feedback"></i>
																</div>
																<a href="#" class="btn btn-white margin-top-clear">Subscribe</a>
															</form>
														</div>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
												</div>
											</div>
										</div>
									</div>
									<!-- Modal end -->
								</div>

								<div class="col-sm-6 col-md-3 isotope-item app-development">
									<div class="image-box">
										<div class="overlay-container">
											<img src="images/portfolio-2.jpg" alt="">
											<a class="overlay small" data-toggle="modal" data-target="#project-2">
												<i class="fa fa-link"></i>
												<span>App Development</span>
											</a>
										</div>
										<a class="btn btn-light-gray btn-block" data-toggle="modal" data-target="#project-2">Project Title</a>
									</div>
									<!-- Modal -->
									<div class="modal fade" id="project-2" tabindex="-1" role="dialog" aria-labelledby="project-2-label" aria-hidden="true">
										<div class="modal-dialog modal-lg">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
													<h4 class="modal-title" id="project-2-label">Project Title</h4>
												</div>
												<div class="modal-body">
													<div class="row">
														<div class="col-md-6">
															<h3>Project Description</h3>
															<div class="separator-2"></div>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
															<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
														</div>
														<div class="col-md-6">
															<div class="owl-carousel content-slider-with-controls">
																<div class="overlay-container">
																	<img src="images/portfolio-item-1.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-2.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-3.jpg" alt="">
																</div>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-md-6 col-xs-6">
															<h3>Project Info</h3>
															<ul class="list">
																<li><strong class="vertical-divider">Client </strong> John Doe</li>
																<li><strong class="vertical-divider">Date </strong> OCT 2014</li>
																<li><strong class="vertical-divider">In </strong> Web Design</li>
																<li><strong class="vertical-divider">Place </strong> Europe</li>
																<li><strong class="vertical-divider">URL </strong> <a href="http://www.htmlcoder.me/preview/idea/v.1.0/">www.idea.com</a></li>
															</ul>
														</div>
														<div class="col-md-6 col-xs-12">
															<h3>More info</h3>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
															<form role="form">
																<div class="form-group has-feedback">
																	<input type="email" class="form-control" id="project-2-email" placeholder="Email">
																	<i class="fa fa-envelope-o form-control-feedback"></i>
																</div>
																<a href="#" class="btn btn-white margin-top-clear">Subscribe</a>
															</form>
														</div>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
												</div>
											</div>
										</div>
									</div>
									<!-- Modal end -->
								</div>
								
								<div class="col-sm-6 col-md-3 isotope-item web-design">
									<div class="image-box">
										<div class="overlay-container">
											<img src="images/portfolio-3.jpg" alt="">
											<a class="overlay small" data-toggle="modal" data-target="#project-3">
												<i class="fa fa-link"></i>
												<span>Web Design</span>
											</a>
										</div>
										<a class="btn btn-light-gray btn-block" data-toggle="modal" data-target="#project-3">Project Title</a>
									</div>
									<!-- Modal -->
									<div class="modal fade" id="project-3" tabindex="-1" role="dialog" aria-labelledby="project-3-label" aria-hidden="true">
										<div class="modal-dialog modal-lg">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
													<h4 class="modal-title" id="project-3-label">Project Title</h4>
												</div>
												<div class="modal-body">
													<div class="row">
														<div class="col-md-6">
															<h3>Project Description</h3>
															<div class="separator-2"></div>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
															<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
														</div>
														<div class="col-md-6">
															<div class="owl-carousel content-slider-with-controls">
																<div class="overlay-container">
																	<img src="images/portfolio-item-1.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-2.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-3.jpg" alt="">
																</div>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-md-6 col-xs-6">
															<h3>Project Info</h3>
															<ul class="list">
																<li><strong class="vertical-divider">Client </strong> John Doe</li>
																<li><strong class="vertical-divider">Date </strong> OCT 2014</li>
																<li><strong class="vertical-divider">In </strong> Web Design</li>
																<li><strong class="vertical-divider">Place </strong> Europe</li>
																<li><strong class="vertical-divider">URL </strong> <a href="http://www.htmlcoder.me/preview/idea/v.1.0/">www.idea.com</a></li>
															</ul>
														</div>
														<div class="col-md-6 col-xs-12">
															<h3>More info</h3>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
															<form role="form">
																<div class="form-group has-feedback">
																	<input type="email" class="form-control" id="project-3-email" placeholder="Email">
																	<i class="fa fa-envelope-o form-control-feedback"></i>
																</div>
																<a href="#" class="btn btn-white margin-top-clear">Subscribe</a>
															</form>
														</div>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
												</div>
											</div>
										</div>
									</div>
									<!-- Modal end -->
								</div>
								
								<div class="col-sm-6 col-md-3 isotope-item site-building">
									<div class="image-box">
										<div class="overlay-container">
											<img src="images/portfolio-4.jpg" alt="">
											<a class="overlay small" data-toggle="modal" data-target="#project-4">
												<i class="fa fa-link"></i>
												<span>Site Building</span>
											</a>
										</div>
										<a class="btn btn-light-gray btn-block" data-toggle="modal" data-target="#project-4">Project Title</a>
									</div>
									<!-- Modal -->
									<div class="modal fade" id="project-4" tabindex="-1" role="dialog" aria-labelledby="project-4-label" aria-hidden="true">
										<div class="modal-dialog modal-lg">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
													<h4 class="modal-title" id="project-4-label">Project Title</h4>
												</div>
												<div class="modal-body">
													<div class="row">
														<div class="col-md-6">
															<h3>Project Description</h3>
															<div class="separator-2"></div>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
															<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
														</div>
														<div class="col-md-6">
															<div class="owl-carousel content-slider-with-controls">
																<div class="overlay-container">
																	<img src="images/portfolio-item-1.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-2.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-3.jpg" alt="">
																</div>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-md-6 col-xs-6">
															<h3>Project Info</h3>
															<ul class="list">
																<li><strong class="vertical-divider">Client </strong> John Doe</li>
																<li><strong class="vertical-divider">Date </strong> OCT 2014</li>
																<li><strong class="vertical-divider">In </strong> Web Design</li>
																<li><strong class="vertical-divider">Place </strong> Europe</li>
																<li><strong class="vertical-divider">URL </strong> <a href="http://www.htmlcoder.me/preview/idea/v.1.0/">www.idea.com</a></li>
															</ul>
														</div>
														<div class="col-md-6 col-xs-12">
															<h3>More info</h3>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
															<form role="form">
																<div class="form-group has-feedback">
																	<input type="email" class="form-control" id="project-4-email" placeholder="Email">
																	<i class="fa fa-envelope-o form-control-feedback"></i>
																</div>
																<a href="#" class="btn btn-white margin-top-clear">Subscribe</a>
															</form>
														</div>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
												</div>
											</div>
										</div>
									</div>
									<!-- Modal end -->
								</div>
								
								<div class="col-sm-6 col-md-3 isotope-item app-development">
									<div class="image-box">
										<div class="overlay-container">
											<img src="images/portfolio-5.jpg" alt="">
											<a class="overlay small" data-toggle="modal" data-target="#project-5">
												<i class="fa fa-link"></i>
												<span>App Development</span>
											</a>
										</div>
										<a class="btn btn-light-gray btn-block" data-toggle="modal" data-target="#project-5">Project Title</a>
									</div>
									<!-- Modal -->
									<div class="modal fade" id="project-5" tabindex="-1" role="dialog" aria-labelledby="project-5-label" aria-hidden="true">
										<div class="modal-dialog modal-lg">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
													<h4 class="modal-title" id="project-5-label">Project Title</h4>
												</div>
												<div class="modal-body">
													<div class="row">
														<div class="col-md-6">
															<h3>Project Description</h3>
															<div class="separator-2"></div>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
															<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
														</div>
														<div class="col-md-6">
															<div class="owl-carousel content-slider-with-controls">
																<div class="overlay-container">
																	<img src="images/portfolio-item-1.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-2.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-3.jpg" alt="">
																</div>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-md-6 col-xs-6">
															<h3>Project Info</h3>
															<ul class="list">
																<li><strong class="vertical-divider">Client </strong> John Doe</li>
																<li><strong class="vertical-divider">Date </strong> OCT 2014</li>
																<li><strong class="vertical-divider">In </strong> Web Design</li>
																<li><strong class="vertical-divider">Place </strong> Europe</li>
																<li><strong class="vertical-divider">URL </strong> <a href="http://www.htmlcoder.me/preview/idea/v.1.0/">www.idea.com</a></li>
															</ul>
														</div>
														<div class="col-md-6 col-xs-12">
															<h3>More info</h3>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
															<form role="form">
																<div class="form-group has-feedback">
																	<input type="email" class="form-control" id="project-5-email" placeholder="Email">
																	<i class="fa fa-envelope-o form-control-feedback"></i>
																</div>
																<a href="#" class="btn btn-white margin-top-clear">Subscribe</a>
															</form>
														</div>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
												</div>
											</div>
										</div>
									</div>
									<!-- Modal end -->
								</div>
								
								<div class="col-sm-6 col-md-3 isotope-item web-design">
									<div class="image-box">
										<div class="overlay-container">
											<img src="images/portfolio-6.jpg" alt="">
											<a class="overlay small" data-toggle="modal" data-target="#project-6">
												<i class="fa fa-link"></i>
												<span>Web Design</span>
											</a>
										</div>
										<a class="btn btn-light-gray btn-block" data-toggle="modal" data-target="#project-6">Project Title</a>
									</div>
									<!-- Modal -->
									<div class="modal fade" id="project-6" tabindex="-1" role="dialog" aria-labelledby="project-6-label" aria-hidden="true">
										<div class="modal-dialog modal-lg">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
													<h4 class="modal-title" id="project-6-label">Project Title</h4>
												</div>
												<div class="modal-body">
													<div class="row">
														<div class="col-md-6">
															<h3>Project Description</h3>
															<div class="separator-2"></div>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
															<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
														</div>
														<div class="col-md-6">
															<div class="owl-carousel content-slider-with-controls">
																<div class="overlay-container">
																	<img src="images/portfolio-item-1.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-2.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-3.jpg" alt="">
																</div>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-md-6 col-xs-6">
															<h3>Project Info</h3>
															<ul class="list">
																<li><strong class="vertical-divider">Client </strong> John Doe</li>
																<li><strong class="vertical-divider">Date </strong> OCT 2014</li>
																<li><strong class="vertical-divider">In </strong> Web Design</li>
																<li><strong class="vertical-divider">Place </strong> Europe</li>
																<li><strong class="vertical-divider">URL </strong> <a href="http://www.htmlcoder.me/preview/idea/v.1.0/">www.idea.com</a></li>
															</ul>
														</div>
														<div class="col-md-6 col-xs-12">
															<h3>More info</h3>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
															<form role="form">
																<div class="form-group has-feedback">
																	<input type="email" class="form-control" id="project-6-email" placeholder="Email">
																	<i class="fa fa-envelope-o form-control-feedback"></i>
																</div>
																<a href="#" class="btn btn-white margin-top-clear">Subscribe</a>
															</form>
														</div>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
												</div>
											</div>
										</div>
									</div>
									<!-- Modal end -->
								</div>
								
								<div class="col-sm-6 col-md-3 isotope-item site-building">
									<div class="image-box">
										<div class="overlay-container">
											<img src="images/portfolio-7.jpg" alt="">
											<a class="overlay small" data-toggle="modal" data-target="#project-7">
												<i class="fa fa-link"></i>
												<span>Site Building</span>
											</a>
										</div>
										<a class="btn btn-light-gray btn-block" data-toggle="modal" data-target="#project-7">Project Title</a>
									</div>
									<!-- Modal -->
									<div class="modal fade" id="project-7" tabindex="-1" role="dialog" aria-labelledby="project-7-label" aria-hidden="true">
										<div class="modal-dialog modal-lg">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
													<h4 class="modal-title" id="project-7-label">Project Title</h4>
												</div>
												<div class="modal-body">
													<div class="row">
														<div class="col-md-6">
															<h3>Project Description</h3>
															<div class="separator-2"></div>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
															<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
														</div>
														<div class="col-md-6">
															<div class="owl-carousel content-slider-with-controls">
																<div class="overlay-container">
																	<img src="images/portfolio-item-1.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-2.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-3.jpg" alt="">
																</div>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-md-6 col-xs-6">
															<h3>Project Info</h3>
															<ul class="list">
																<li><strong class="vertical-divider">Client </strong> John Doe</li>
																<li><strong class="vertical-divider">Date </strong> OCT 2014</li>
																<li><strong class="vertical-divider">In </strong> Web Design</li>
																<li><strong class="vertical-divider">Place </strong> Europe</li>
																<li><strong class="vertical-divider">URL </strong> <a href="http://www.htmlcoder.me/preview/idea/v.1.0/">www.idea.com</a></li>
															</ul>
														</div>
														<div class="col-md-6 col-xs-12">
															<h3>More info</h3>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
															<form role="form">
																<div class="form-group has-feedback">
																	<input type="email" class="form-control" id="project-7-email" placeholder="Email">
																	<i class="fa fa-envelope-o form-control-feedback"></i>
																</div>
																<a href="#" class="btn btn-white margin-top-clear">Subscribe</a>
															</form>
														</div>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
												</div>
											</div>
										</div>
									</div>
									<!-- Modal end -->
								</div>
								
								<div class="col-sm-6 col-md-3 isotope-item web-design">
									<div class="image-box">
										<div class="overlay-container">
											<img src="images/portfolio-8.jpg" alt="">
											<a class="overlay small" data-toggle="modal" data-target="#project-8">
												<i class="fa fa-link"></i>
												<span>Web Design</span>
											</a>
										</div>
										<a class="btn btn-light-gray btn-block" data-toggle="modal" data-target="#project-8">Project Title</a>
									</div>
									<!-- Modal -->
									<div class="modal fade" id="project-8" tabindex="-1" role="dialog" aria-labelledby="project-8-label" aria-hidden="true">
										<div class="modal-dialog modal-lg">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
													<h4 class="modal-title" id="project-8-label">Project Title</h4>
												</div>
												<div class="modal-body">
													<div class="row">
														<div class="col-md-6">
															<h3>Project Description</h3>
															<div class="separator-2"></div>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque sed, quidem quis praesentium, ut unde. Quae sed, incidunt laudantium nesciunt, optio corporis quod earum pariatur omnis illo saepe numquam suscipit, nemo placeat dignissimos eius mollitia et quas officia doloremque ipsum labore rem deserunt vero! Magnam totam delectus accusantium voluptas et, tempora quos atque, fugiat, obcaecati voluptatibus commodi illo voluptates dolore nemo quo soluta quis.</p>
															<p>Molestiae sed enim laboriosam atque delectus voluptates rerum nostrum sapiente obcaecati molestias quasi optio exercitationem, voluptate quis consequatur libero incidunt, in, quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nobis officiis, autem earum tenetur quidem. Quae non dicta earum. Ipsum autem eaque cum dolor placeat corporis quisquam dolorum at nesciunt.</p>
														</div>
														<div class="col-md-6">
															<div class="owl-carousel content-slider-with-controls">
																<div class="overlay-container">
																	<img src="images/portfolio-item-1.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-2.jpg" alt="">
																</div>
																<div class="overlay-container">
																	<img src="images/portfolio-item-3.jpg" alt="">
																</div>
															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-md-6 col-xs-6">
															<h3>Project Info</h3>
															<ul class="list">
																<li><strong class="vertical-divider">Client </strong> John Doe</li>
																<li><strong class="vertical-divider">Date </strong> OCT 2014</li>
																<li><strong class="vertical-divider">In </strong> Web Design</li>
																<li><strong class="vertical-divider">Place </strong> Europe</li>
																<li><strong class="vertical-divider">URL </strong> <a href="http://www.htmlcoder.me/preview/idea/v.1.0/">www.idea.com</a></li>
															</ul>
														</div>
														<div class="col-md-6 col-xs-12">
															<h3>More info</h3>
															<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
															<form role="form">
																<div class="form-group has-feedback">
																	<input type="email" class="form-control" id="project-8-email" placeholder="Email">
																	<i class="fa fa-envelope-o form-control-feedback"></i>
																</div>
																<a href="#" class="btn btn-white margin-top-clear">Subscribe</a>
															</form>
														</div>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
												</div>
											</div>
										</div>
									</div>
									<!-- Modal end -->
								</div>

							</div>
							<!-- portfolio items end -->
						
						</div>
					</div>
				</div>
			</div>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<div class="section parallax-bg dark-translucent-bg object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="300">
				<div class="owl-carousel content-slider">
					<div class="testimonial">
						<div class="container">
							<div class="row">
								<div class="col-md-8 col-md-offset-2">
									<h2 class="title">Just Perfect!</h2>
									<div class="testimonial-image">
										<img src="images/testimonial-1.jpg" alt="Jane Doe" title="Jane Doe" class="img-circle">
									</div>
									<div class="testimonial-body">
										<p>Sed ut perspiciatis unde omnis iste natu error sit voluptatem accusan tium dolore laud antium,  totam rem dolor sit amet tristique pulvinar, turpis arcu rutrum nunc, ac laoreet turpis augue a justo.</p>
										<div class="testimonial-info-1">- Jane Doe</div>
										<div class="testimonial-info-2">By Company</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="testimonial">
						<div class="container">
							<div class="row">
								<div class="col-md-8 col-md-offset-2">
									<h2 class="title">Wow amazing!</h2>
									<div class="testimonial-image">
										<img src="images/testimonial-2.jpg" alt="Jane Doe" title="Jane Doe" class="img-circle">
									</div>
									<div class="testimonial-body">
										<p>Turpis arcu rutrum nunc, ac laoreet turpis augue a justo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, esse, animi maxime voluptate tempore at sunt labore incidunt nulla dignissimos iusto ad similique inventore distinctio quam repellendus itaque minus minima.</p>
										<div class="testimonial-info-1">- John Doe</div>
										<div class="testimonial-info-2">By Company</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="testimonial">
						<div class="container">
							<div class="row">
								<div class="col-md-8 col-md-offset-2">
									<h2 class="title">Thanks!</h2>
									<div class="testimonial-image">
										<img src="images/testimonial-3.jpg" alt="Jane Doe" title="Jane Doe" class="img-circle">
									</div>
									<div class="testimonial-body">
										<p>Phosfluorescently e-enable adaptive synergy for strategic quality vectors. Continually transform fully tested expertise with competitive technologies ac laoreet turpis augue a justo.</p>
										<div class="testimonial-info-1">- John Doe</div>
										<div class="testimonial-info-2">By Company</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<div class="section gray-bg text-muted footer-top clearfix object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="300">
				<div class="container">
					<div class="row">
						<div class="col-md-6">
							<div class="owl-carousel clients">
								<div class="client">
									<a href="#"><img src="images/client-1.png" alt=""></a>
								</div>
								<div class="client">
									<a href="#"><img src="images/client-2.png" alt=""></a>
								</div>
								<div class="client">
									<a href="#"><img src="images/client-3.png" alt=""></a>
								</div>
								<div class="client">
									<a href="#"><img src="images/client-4.png" alt=""></a>
								</div>
								<div class="client">
									<a href="#"><img src="images/client-5.png" alt=""></a>
								</div>
								<div class="client">
									<a href="#"><img src="images/client-6.png" alt=""></a>
								</div>
								<div class="client">
									<a href="#"><img src="images/client-7.png" alt=""></a>
								</div>
								<div class="client">
									<a href="#"><img src="images/client-8.png" alt=""></a>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<blockquote class="inline">
								<p class="margin-clear">Design is not just what it looks like and feels like. Design is how it works.</p>	
								<footer><cite title="Source Title">Steve Jobs </cite></footer>
							</blockquote>
						</div>
					</div>
				</div>
			</div>
			<!-- section end -->

			<!-- footer start (Add "light" class to #footer in order to enable light footer) -->
			<!-- ================ -->
			<footer id="footer" class="light object-non-visible" data-animation-effect="fadeIn" data-effect-delay="300">

				<!-- .footer start -->
				<!-- ================ -->
				<div class="footer">
					<div class="container">
						<div class="row">
							<div class="col-sm-6">
								<div class="footer-content object-non-visible" data-animation-effect="fadeInLeftSmall" data-effect-delay="300">
									<div class="logo-footer"><img id="logo-footer" src="images/logo_red_footer.png" alt=""></div>
									<p>Veritatis officiis ullam libero quam aliquam, tenetur dolor incidunt praesentium dolorum laborum tempora suscipit quo sapiente?</p>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. possimus laborum. Accusantium, itaque.</p>
									<div class="row">
										<div class="col-md-6">
											<ul class="list-icons">
												<li><i class="fa fa-map-marker pr-10"></i> One infinity loop, 54100</li>
												<li><i class="fa fa-phone pr-10"></i> +00 1234567890</li>
												<li><i class="fa fa-envelope-o pr-10"></i> info@idea.com</li>
											</ul>
										</div>
										<div class="col-md-6">
											<ul class="social-links colored">
												<li class="facebook"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-facebook"></i></a></li>
												<li class="twitter"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-twitter"></i></a></li>
												<li class="googleplus"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-google-plus"></i></a></li>
												<li class="skype"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-skype"></i></a></li>
												<li class="linkedin"><a target="_blank" href="http://www.cssmoban.com"><i class="fa fa-linkedin"></i></a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="footer-content object-non-visible" data-animation-effect="fadeInRightSmall" data-effect-delay="300">
									<h2>Contact Us</h2>
									<div class="alert alert-success hidden" id="contactSuccess2">
										<strong>Success!</strong> Your message has been sent to us.
									</div>
									<div class="alert alert-error hidden" id="contactError2">
										<strong>Error!</strong> There was an error sending your message.
									</div>
									<form role="form" id="footer-form">
										<div class="form-group has-feedback">
											<label class="sr-only" for="name2">Name</label>
											<input type="text" class="form-control" id="name2" placeholder="Name" name="name2">
											<i class="fa fa-user form-control-feedback"></i>
										</div>
										<div class="form-group has-feedback">
											<label class="sr-only" for="email2">Email address</label>
											<input type="email" class="form-control" id="email2" placeholder="Enter email" name="email2">
											<i class="fa fa-envelope form-control-feedback"></i>
										</div>
										<div class="form-group has-feedback">
											<label class="sr-only" for="message2">Message</label>
											<textarea class="form-control" rows="4" id="message2" placeholder="Message" name="message2"></textarea>
											<i class="fa fa-pencil form-control-feedback"></i>
										</div>
										<input type="submit" value="Send" class="btn btn-default">
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- .footer end -->

				<!-- .subfooter start -->
				<!-- ================ -->
				<div class="subfooter">
					<div class="container">
						<div class="row">
							<div class="col-md-6">
								<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
</p>
							</div>
							<div class="col-md-6">
								<nav class="navbar navbar-default" role="navigation">
									<!-- Toggle get grouped for better mobile display -->
									<div class="navbar-header">
										<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
											<span class="sr-only">Toggle navigation</span>
											<span class="icon-bar"></span>
											<span class="icon-bar"></span>
											<span class="icon-bar"></span>
										</button>
									</div>   
									<div class="collapse navbar-collapse" id="navbar-collapse-2">
										<ul class="nav navbar-nav">
											<li><a href="index.html">Home</a></li>
											<li><a href="page-about.html">About</a></li>
											<li><a href="blog-right-sidebar.html">Blog</a></li>
											<li><a href="portfolio-3col.html">Portfolio</a></li>
											<li><a href="page-contact.html">Contact</a></li>
										</ul>
									</div>
								</nav>
							</div>
						</div>
					</div>
				</div>
				<!-- .subfooter end -->

			</footer>
			<!-- footer end -->

		</div>
		<!-- page-wrapper end -->

		<!-- JavaScript files placed at the end of the document so the pages load faster
		================================================== -->
		<!-- Jquery and Bootstap core js files -->
		<script type="text/javascript" src="plugins/jquery.min.js"></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

		<!-- Modernizr javascript -->
		<script type="text/javascript" src="plugins/modernizr.js"></script>

		<!-- jQuery REVOLUTION Slider  -->
		<script type="text/javascript" src="plugins/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
		<script type="text/javascript" src="plugins/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

		<!-- Isotope javascript -->
		<script type="text/javascript" src="plugins/isotope/isotope.pkgd.min.js"></script>

		<!-- Owl carousel javascript -->
		<script type="text/javascript" src="plugins/owl-carousel/owl.carousel.js"></script>

		<!-- Magnific Popup javascript -->
		<script type="text/javascript" src="plugins/magnific-popup/jquery.magnific-popup.min.js"></script>

		<!-- Appear javascript -->
		<script type="text/javascript" src="plugins/jquery.appear.js"></script>

		<!-- Count To javascript -->
		<script type="text/javascript" src="plugins/jquery.countTo.js"></script>

		<!-- Parallax javascript -->
		<script src="plugins/jquery.parallax-1.1.3.js"></script>

		<!-- Contact form -->
		<script src="plugins/jquery.validate.js"></script>

		<!-- Initialization of Plugins -->
		<script type="text/javascript" src="js/template.js"></script>

		<!-- Custom Scripts -->
		<script type="text/javascript" src="js/custom.js"></script>

	</body>
</html>
